import {
    BoxGeometry,
    Clock,
    Mesh,
    MeshBasicMaterial,
    MeshLambertMaterial,
    WebGLRenderer,
} from "three";
import { reactive, toRef } from "vue";
//引入性能监视器stats.js
import Stats from "three/addons/libs/stats.module.js";
const _stats = new Stats();
document.body.appendChild(_stats.domElement);
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
export const createMesh = ({ geometry, material, position }) => {
    console.log({ ...material });
    // 创建长方体对象
    const _geometry = new BoxGeometry(geometry.width, geometry.height, geometry.depth);
    // 创建材质对象
    // const _material = new MeshBasicMaterial({ ...material });
    // 创建受光照影响的模型
    const _material = new MeshLambertMaterial({ ...material });
    // 创建模型
    const mesh = new Mesh(_geometry, _material);
    // 设置模型初始位置
    mesh.position.set(position.x, position.y, position.z);
    return mesh;
};

export const Renderer = ({
    scene,
    camera,
    mesh,
    plogin,
    dom = document.body,
    width = window.innerWidth,
    height = window.innerHeight,
}) => {
    // 将元素添加至场景中
    sceneAdd(plogin, scene);
    // 创建渲染器对象
    const renderer = new WebGLRenderer();
    // 初始化渲染器参数
    renderer.setSize(width, height);
    // 设置相机轨道控制器 OrbitControls
    const contorols = new OrbitControls(camera, renderer.domElement);
    contorols.addEventListener("change", () => {
        _stats.update();
        renderer.render(scene, camera); // 执行渲染函数
    }); // 监听鼠标键盘事件
    renderer.render(scene, camera); // 执行渲染函数
    // 循环渲染写法
    // 计算每帧间隔时间
    // const clook = new Clock();
    // function routerRender() {
    //     _stats.update();
    //     renderer.render(scene, camera);
    //     mesh.rotateY(1); // 每次绕Y轴旋转0.01
    //     mesh.rotateX(1); // 每次绕Y轴旋转0.01
    //     requestAnimationFrame(routerRender);
    // }
    // routerRender();
    // 添加至dom
    dom.appendChild(renderer.domElement);
    // onresize 事件会在窗口被调整大小时发生
    window.onresize = function () {
        // 重置渲染器输出画布canvas尺寸
        renderer.setSize(window.innerWidth, window.innerHeight);
        // 全屏情况下：设置观察范围长宽比aspect为窗口宽高比
        camera.aspect = window.innerWidth / window.innerHeight;
        // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
        // 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)
        // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
        camera.updateProjectionMatrix();
    };
};

function sceneAdd(item, scene) {
    item.forEach(el => {
        scene.add(el);
    });
}
